import React, { useState } from "react";
import { Button, Tooltip } from "antd";
import {
  HomeOutlined,
  FolderOutlined,
  AppstoreOutlined,
  ReadOutlined,
  TableOutlined,
  ProductOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from "@ant-design/icons";
import { NavLink } from "react-router-dom";
import mobxData from "@/store/mobx-data";
import "./index.css";

const App: React.FC = () => {
  const [status, setStatus] = useState(false);

  const onChangeWidth = () => {
    const elements = document.querySelectorAll(".menu-item dd") as NodeListOf<
      HTMLElement
    >;

    if (status) {
      mobxData.setWidth(90);

      for (let i = 0; i < elements.length; i++) {
        (elements[i].style as any).display = "block";
      }
    } else {
      mobxData.setWidth(60);

      for (let i = 0; i < elements.length; i++) {
        (elements[i].style as any).display = "none";
      }
    }

    setStatus(!status);
  };

  return (
    <div className="menu">
      <div className="menu-item-all">
        <NavLink to="/">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="我的门户"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<HomeOutlined />} />
                </Tooltip>
              ) : (
                <HomeOutlined />
              )}
            </dt>
            <dd>我的门户</dd>
          </dl>
        </NavLink>
        <NavLink to="/timeline">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="文档中心"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<FolderOutlined />} />
                </Tooltip>
              ) : (
                <FolderOutlined />
              )}
            </dt>
            <dd>文档中心</dd>
          </dl>
        </NavLink>
        <NavLink to="/collapse">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="工作中心"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<AppstoreOutlined />} />
                </Tooltip>
              ) : (
                <AppstoreOutlined />
              )}
            </dt>
            <dd>工作中心</dd>
          </dl>
        </NavLink>
        <dl className="menu-item">
          <dt>
            {status ? (
              <Tooltip
                placement="right"
                title="知识中心"
                className="menu-tooltip"
              >
                <Button type="text" icon={<ReadOutlined />} />
              </Tooltip>
            ) : (
              <ReadOutlined />
            )}
          </dt>
          <dd>知识中心</dd>
        </dl>
        <dl className="menu-item">
          <dt>
            {status ? (
              <Tooltip
                placement="right"
                title="表格中心"
                className="menu-tooltip"
              >
                <Button type="text" icon={<TableOutlined />} />
              </Tooltip>
            ) : (
              <TableOutlined />
            )}
          </dt>
          <dd>表格中心</dd>
        </dl>
        <NavLink to="/app">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="应用"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<ProductOutlined />} />
                </Tooltip>
              ) : (
                <ProductOutlined />
              )}
            </dt>
            <dd>应用</dd>
          </dl>
        </NavLink>
      </div>

      <div className="collapse">
        <Tooltip placement="right" title={status ? "展开" : "收起"}>
          <Button
            type="text"
            icon={
              status ? (
                <MenuUnfoldOutlined onClick={onChangeWidth} />
              ) : (
                <MenuFoldOutlined onClick={onChangeWidth} />
              )
            }
            onClick={onChangeWidth}
          />
        </Tooltip>
      </div>
    </div>
  );
};

export default App;
